<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind指令</title>
    <style type="text/css">
        .textColor {
            font-weight: bold;
        }
        .textSize {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="imageSrc">
        <!--v-bind简写形式-->
        <!--<img src="imageSrc"/>-->
        <div v-bind:class="[classA,classB]">类名作为一个属性值保存</div>
        <div v-bind:calss="[isA?classA:classB]">三目运算符</div>
    </div>
    <script src="../js/vue.min.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                imageSrc: "images/beida.jpg",
                classA: 'textColor',
                classB: 'textSize',
                isA: false
            }
        });
    </script>
</body>
</html>